<template>
  <div class="wrapper">
    <div class="newsType">
      <div class="title">
        <i class="el-icon-link"></i> &nbsp;网站导航
      </div>
      <div class="more cursor">
      </div>
    </div>
    <div class="jump-link">
      <a class="website" target="_blank" href="">
        <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;中国消防信息网
      </a>
      <div class="main">
        <div class="website" @mouseenter="showCities = true, showTotal = false">
          <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;河南消防信息网
        </div>
        <div class="city" :style="{ display: showCities ? 'flex' : 'none' }">
          <div v-for="city1 in cities1" :key="city1" @click="openLink(cities1Links[city1])">
            {{ city1 }}&nbsp;&nbsp;|
          </div>
        </div>
      </div>

      <div class="main">
        <div class="website" @mouseenter="showTotal = true, showCities = false">
          <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;总队级网站
        </div>
        <div class="city" :style="{ display: showTotal ? 'flex' : 'none' }">
          <div v-for="city2 in cities2" :key="city2" @click="openLink(cities2Links[city2])">
            {{ city2 }}&nbsp;&nbsp;|
          </div>
        </div>
      </div>
      <a class="website" target="_blank" href="">
        <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;内部网页
      </a>
      <a class="website" target="_blank" href="">
        <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;其他网站
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCities: false,
      showTotal: false,
      cities1: ['郑州', '开封', '洛阳', '信阳', '新乡', '安阳', '焦作', '南阳', '濮阳', '鹤壁', '漯河', '济源', '商丘', '周口', '驻马店', '平顶山', '三门峡', '航空港'],
      cities2: ['北京', '天津', '河北', '山西', '辽宁', '吉林', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南',
        '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆','内蒙古','黑龙江', ],
      cities1Links: { // 对应的链接  
        '郑州': 'https://www.example.com/city1',
        '开封': 'https://www.example.com/city2',
        '洛阳': 'https://www.example.com/city2',
        '信阳': 'https://www.example.com/city2',
        '新乡': 'https://www.example.com/city2',
        '安阳': 'https://www.example.com/city2',
        '焦作': 'https://www.example.com/city2',
        '南阳': 'https://www.example.com/city2',
        '濮阳': 'https://www.example.com/city2',
        '鹤壁': 'https://www.example.com/city2',
        '漯河': 'https://www.example.com/city2',
        '济源': 'https://www.example.com/city2',
        '商丘': 'https://www.example.com/city2',
        '周口': 'https://www.example.com/city2',
        '驻马店': 'https://www.example.com/city2',
        '平顶山': 'https://www.example.com/city2',
        '三门峡': 'https://www.example.com/city2',
        '航空港': 'https://www.example.com/city2',
      },
      cities2Links: { // 对应的链接  
        '北京': 'https://www.example.com/cityA',
        '天津': 'https://www.example.com/cityB',
        '河北': 'https://www.example.com/cityB',
        '山西': 'https://www.example.com/cityB',
        '辽宁': 'https://www.example.com/cityB',
        '吉林': 'https://www.example.com/cityB',
        '上海': 'https://www.example.com/cityB',
        '江苏': 'https://www.example.com/cityB',
        '浙江': 'https://www.example.com/cityB',
        '安徽': 'https://www.example.com/cityB',
        '福建': 'https://www.example.com/cityB',
        '江西': 'https://www.example.com/cityB',
        '山东': 'https://www.example.com/cityB',
        '河南': 'https://www.example.com/cityB',
        '湖北': 'https://www.example.com/cityB',
        '湖南': 'https://www.example.com/cityB',
        '广东': 'https://www.example.com/cityB',
        '广西': 'https://www.example.com/cityB',
        '海南': 'https://www.example.com/cityB',
        '重庆': 'https://www.example.com/cityB',
        '四川': 'https://www.example.com/cityB',
        '贵州': 'https://www.example.com/cityB',
        '云南': 'https://www.example.com/cityB',
        '西藏': 'https://www.example.com/cityB',
        '陕西': 'https://www.example.com/cityB',
        '甘肃': 'https://www.example.com/cityB',
        '青海': 'https://www.example.com/cityB',
        '宁夏': 'https://www.example.com/cityB',
        '新疆': 'https://www.example.com/cityB',
        '内蒙古': 'https://www.example.com/cityB',
        '黑龙江': 'https://www.example.com/cityB',
      },
    };
  },
  methods: {
    openLink(url) {  
      if (url) {  
        window.open(url, '_blank');  
      }  
    }, 
  },
};
</script>

<style scoped lang="less">
.wrapper {
  padding-top: 8px;
}

.newsType {
  display: flex;
  justify-content: space-between;
  /*border: red 1px solid;*/
}

.title {
  font-size: 20px;
  color: #2275a1;
  white-space: nowrap;
  border-bottom: 3px solid #2275a1;
}

.more {
  width: 100%;
  justify-content: right;
  border-bottom: 3px solid rgb(123, 134, 141);
}

.jump-link {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  padding-top: 10px;
  position: relative;
}

.jump-link .main {
  display: block;
  margin-bottom: 20px;
}

.jump-link .website {
  min-width: 200px;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #0a7ebb;
  /* 河南消防信息网的背景色 */
  color: white;
  border-radius: 3px;
}

.jump-link .city {
  margin-top: 20px;
  flex-wrap: wrap;
  display: flex;
  // border: solid 1px #A9A9A9;
  position: absolute;
  left: 0;
  /* 定位到左边界 */
  right: 0;

  /* 定位到右边界 */
  div {
    margin: 10px;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    box-sizing: border-box;
    background-color: white;
    /* 城市的背景色 */
    color: #808080;

  }
}
</style>